<script setup>

import Son from "./Son.vue";
import {reactive, ref} from "vue";

//1、父传子：单向数据流
const  money = ref(100);
const books = ref(["西游记","水浒传"])

const data = reactive({
  money:100,
  books:["西游记","水浒传"]
})
function moneyMinis(arg) {
  data.money += arg
}

</script>

<template>
<div style="background-color: #f9f9f9; text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 700px">
  <div>
    <h1>Father</h1>
    <button @click="data.money+=10">充值</button>
  </div>

<!--  <Son :money="money" :books="books"/>-->
  <div>
    <Son v-bind="data" @buy="moneyMinis"/>
  </div>

</div>
</template>

<style scoped>

</style>